今日文章目錄

• 需求說明
• 事前準備
• 遇到問題
• 參考資料

需求說明

• 下拉選單：選擇番茄鐘時間(分鐘)
• 下拉選單：選擇休息時間(分鐘)
• 番茄鐘結束後，直接進入休息時間 (背景與文字顏色做變換)

事前準備

• 下拉選單：

<div class="form">
  <label for="workTime">
    <select name="workTime" id="workTime">
      <option value="">選擇番茄時間</option>
      <option value="25">25分鐘</option>
      <option value="35">35分鐘</option>
      <option value="45">45分鐘</option>
    </select>
  </label>
  <label for="breakTime">
    <select name="breakTime" id="breakTime">
      <option value="">選擇休息時間</option>
      <option value="5">5分鐘</option>
      <option value="10">10分鐘</option>
      <option value="15">15分鐘</option>
    </select>
  </label>
  <button class="addBtn">+</button>
</div>

• JS 全域變數相關設定：

let countdown;            // 記錄倒數TimeID
let workTimeMinutes;      // 番茄時間
let breakTimeMinutes;     // 休息時間
let isPause = false;      // 是否暫停，預設為 false。
let setPause = WORKTIME;  // 確認目前暫停的是 番茄倒數 還是 休息倒數，預設為 番茄倒數。
let timeleft;             // 倒數剩餘時間

過程紀錄

• 大致規劃：
  • 使用者點擊加入鍵
  • 取得 番茄時間 與 休息時間 (個別存在全域變數：workTimeMinutes、breakTimeMinutes)
  • handleStartBtn: 有好幾種狀況會點擊播放鍵
  • 為了要區別使用者是：(1) 番茄播放 還是 休息播放 (2)直接播放 還是 暫停後播放，會先執行以下判斷：
    1. setPause: 現在是 (1) 番茄播放 還是 休息播放
       • 針對個別倒數進行設定：背景、文字 等。
    2. isPause: 現在是 (2)直接播放 還是 暫停後播放
       • 直接播放: 結束時間計算 使用 workTimeMinutes
       • 暫停後播放: 結束時間計算 使用 timeleft
• codepen 練習: https://codepen.io/chen-chens/pen/JjJMQqQ?editors=0011
• 顯示效果：
  

明天就要來把 ToDoList 跟 番茄鐘 合體了
連假開始！！大家中秋節快樂～